<template>
	<mu-container>
		<mu-appbar style="width: 100%;">
			<mu-button icon slot="left" @click='$root.back'>
				<mu-icon value="arrow_back"></mu-icon>
			</mu-button>
			注册
		</mu-appbar>
		<mu-form ref="form" :model="validateForm" class="mu-demo-form">
			<mu-form-item label="手机号" prop="phone" :rules="phoneRules">
			  <mu-text-field v-model="validateForm.phone" prop="phone"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="密码" prop="password" :rules="passwordRules">
				<mu-text-field type="password" v-model="validateForm.password" prop="password"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="确认密码" prop="mPassword" :rules="mPasswordRules">
				<mu-text-field type="password" v-model="validateForm.mPassword" prop="mPassword"></mu-text-field>
			</mu-form-item>
			<mu-form-item label="验证码" prop="code" :rules="codeRules" class="codeContent">
			  <mu-text-field v-model="validateForm.code" prop="code"></mu-text-field>
			  <mu-button color="success" id="achieveCode">验证码</mu-button>
			</mu-form-item>
			<mu-form-item>
			  <mu-button color="primary" @click="submit">注册</mu-button>
			  <mu-button @click="clear">重置</mu-button>
			</mu-form-item>
		</mu-form>
		<Bar class='bar'></Bar>
	</mu-container>
</template>

<script>
	import axios from 'axios'
	import config from '../config'
	import Bar from '@/components/bar.vue'
	
	export default {
		components:{
			'Bar':Bar
		},
		data () {
			return {
			  reg:/^1[3456789]\d{9}$/,
			  phoneRules: [
				{ validate: (val) => !!val, message: '必须填写用户名'},
				{ validate: (val) => !!this.reg.test(val), message: '请输入正确的手机号'},
			  ],
			  passwordRules: [
				{ validate: (val) => !!val, message: '必须填写密码'},
				{ validate: (val) => val.length >= 6 && val.length <= 10, message: '请输入6-10位数密码'}
			  ],
			  mPasswordRules:[
				{ validate: (val) => !!val, message: '必须填写确认密码'},
			  ],
			  codeRules:[
				{ validate: (val) => !!val, message: '必须填写验证码'},
			  ],
			  validateForm: {
				phone: '',
				password: '',
				mPassword:'',
				code:''
			  },
			}
		},
		created () {
			
		},
		methods: {
			submit () {
			  this.$refs.form.validate().then((result) => {
				console.log('form valid: ', result)
				this.$toast.success('注册成功！');
			  });
			},
			clear () {
			  this.$refs.form.clear();
			  this.validateForm = {
				username: '',
				password: '',
				mPassword:'',
				code:''
			  };
			},
		}
	}
</script>

<style>
	.container{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.mu-demo-form {
	  width: 90%;
	  max-width: 460px;
	  margin: 10% auto;
	}
	.mu-form-item-label{
		float: left;
		width: 25%;
		display: inline;
		font-size: 1.25rem;
		text-align: left;
	}
	.mu-form-item-content{
		float: left;
		display: inline;
	}
	.mu-appbar-title{
		padding-left: 0px !important;
		padding-right: 3.125rem !important;
	}
	.codeContent{
		position: relative;
	}
	#achieveCode{
		position: absolute;
		top: 0.9375rem;
		right: 0px;
		width: 10%;
	}
	.bar{
		position: fixed;
		bottom: 0px;
	}
</style>
